<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module leftIcon="arrow-left" :title="title" />
		<view class="form-contain">
			<u-form labelPosition="left" :model="formInfo" labelWidth="auto" ref="addForm">
				<u-form-item label="头像" prop="avatar" borderBottom>
					<button slot="right" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<u-image :src="formInfo.avatar" width="120rpx" height="120rpx" />
					</button>
				</u-form-item>
				<u-form-item label="昵称" prop="nickName" borderBottom>
					<u-input type="nickname" inputAlign="right" v-model="formInfo.nickName" border="none"
						@blur="onBlur" />
				</u-form-item>
				<u-form-item label="手机号" prop="phonenumber" borderBottom>
					<u-input inputAlign="right" v-model="formInfo.phonenumber" border="none" />
				</u-form-item>

			</u-form>
		</view>
		<view class="quit" @click="toUpdate">
			<u-button type="primary" shape="circle">保存个人信息</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getInfo,
		saveUserInfo
	} from "@/config/api.js"

	export default {
		data() {
			return {
				title: '个人资料',
				nickName: null,
				formInfo: {
					avatar: null,
					nickName: null,
					phonenumber: null,
				}
			}
		},
		computed: {
			...mapState(['user'])
		},
		onLoad() {
			if (this.user) {
				this.formInfo = {
					avatar: this.user.avatar,
					nickName: this.user.nickName,
					phonenumber: this.user.phonenumber,
				}
			}
		},
		onShow() {},
		methods: {
			...mapMutations(['setUser', 'emptyUserInfo']),
			async toUpdate() {
				const res = await saveUserInfo({
					...this.formInfo,
					userId: this.user.userId,
					loginName: this.user.loginName
				})
				if (res) {
					uni.$u.toast('保存成功')
					this.getUserInfo()
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				} else {
					this.emptyUserInfo();
					uni.showModal({
						title: '提示',
						content: '当前登录已无效，请重新登陆。',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								});
							}
						}
					});
				}
			},
			async getUserInfo() {
				const res = await getInfo()
				if (res && res.user) {
					this.setUser(res.user)
				}
			},
			onBlur(e) {
				this.formInfo.nickName = e
			},
			onChooseavatar(e) {
				this.formInfo.avatar = e.detail.avatarUrl
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-contain {
		position: relative;
		height: 100vh;
		overflow-y: auto;

		.avatar-wrapper {
			background-color: transparent;
			/* 透明背景 */
			border: none;
			/* 去掉边框 */
			color: inherit;
			/* 继承父元素的字体颜色 */
			padding: 0;
			/* 去掉内边距 */
		}

		/deep/ .u-checkbox-group {
			flex-wrap: wrap;
		}

		.form-contain {
			background-color: #fff;
			border-radius: 32rpx;
			margin: 12rpx 24rpx;
			padding: 24rpx;

			.title {
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			&.bottom-contain {
				margin-bottom: 200rpx;
			}
		}

		.bottom-btn-contain {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
			width: calc(100vw - 48rpx);
			height: 150rpx;
			background-color: #fff;
			padding: 48rpx 24rpx 0;
		}

		.quit {
			padding: 0 24rpx;
			margin-top: 380rpx;
		}
	}
</style>